<template>
    <div>
		<myheader></myheader>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas="datas"></Breadcrumb>

		
	<section class="featured-block text-center">
		
		<div class="container"> 
			<table>
				<tr	>
					<td>用户名：</td>
					<td><input type="text" name="username" id="" v-model="username"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="text" name="password" id="" v-model="password"></td>
				</tr>
				<tr>
					<!-- 滑块验证码 -->
					<td></td>
					<td><dragVerify
						:width='width'
						:height='height'
						:text='text'
						ref='Verify'
						></dragVerify></td>
				</tr>
				
				<tr>
					<td></td>
					<td>
						<Button @click="submit">登录</Button>
						<Button @click="reset" color='green'>重置</Button>
					</td>
					<td>
						<img src="http://127.0.0.1:8000/static/sina.png" alt="" srcset="" style="cursor:pointer" @click="sina">
					</td>
					<td>
						<img src="http://localhost:8000/static/dingding.png" alt="" style="cursor: pointer;" @click="dingdinglogin">
					</td>
				</tr>
			</table>
			
		</div>
	</section>
		<myfooter></myfooter>
    </div>
</template>


<script>
import myheader from './myheader';
import myfooter from './myfooter';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config'
export default {
	name:"login",
	components:{
		'myheader':myheader,
		'myfooter':myfooter,
		'dragVerify':dragVerify,
	},
    data () {
    return {
		msg: "这是一个变量",
		datas:[{title:'首页',route:{name:'index'}},
				{title:"登录页面"}
				],
		username:'',
		password:'',
		code:'',
		//滑块验证码：
		text:'请将滑块拖动到最右侧',
		//滑动的距离，单位像素px
		width:300,
		height:40,

    }
    },
    mounted:function(){

	},
	methods:{
			//新郎微博登录
		sina(){
			console.log(config['baseurl'])
			console.log(formatXml('你好'))

			//组装url
			let url = "https://api.weibo.com/oauth2/authorize?client_id=2852114568&redirect_uri=http://127.0.0.1:8000/md_admin/weibo"
			//跳转
			window.location.href = url
		},
		dingdinglogin(){
			let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoajtt4hfxbsp1tpdyv&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/md_admin/dingding'
			window.location.href = url
		},

		submit(){
				//验证是否拖动
			console.log(this.$refs.Verify.isPassing);
			if (this.$refs.Verify.isPassing==false) {
				this.$Message('请拖动验证码！')
				return false
			}
			if (this.username == '') {
				this.$Message("用户名不能为空！")
				return false
			}
			if (this.password == "") {
				this.$Message('密码不能为空！')
				return false
			}
			this.axios({
				url:'http://127.0.0.1:8000/login/',
				params:{
					username:this.username,
					password:this.password,
				},
			}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message);

				if (resp.data.code == 200) {
					//将用户名和uid存到localstorge
					localStorage.setItem("username",resp.data.username);
					localStorage.setItem("uid",resp.data.uid);
					localStorage.setItem("jwt",resp.data.jwt);
					//跳转
					this.$router.push("/");
				}
				
			}).catch(error=>{
				console.log(error)
			})
		},
		reset(){
			this.username = ''
			this.password = ''
			this.code = ''
		},
		
    },
}


</script>


<style>
	td{padding: 5px;}


</style>